<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" name="username" placeholder="请输入菜谱名" autocomplete="off" class="layui-input"></div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" lay-submit="" lay-filter="sreach">
                            <i class="layui-icon">&#xe615;</i></button>
                    </div>
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add1.html',600,400)">
                        <i class="layui-icon"></i>添加
                    </button>

                </div>

                <div class="layui-card-body ">
                    <table id="test" lay-filter="idTest"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑" onclick="xadmin.open('编辑','menu-update.html',900,700)" href="javascript:;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"title="删除" onclick="member_del(this)" href="javascript:;">删除</a>
</script>
</body>
<script type="text/html" id="toolbarDemo">
    <div class = "layui-btn-container" >
        <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >
        <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
    </div >
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/cbook/doFindObjects'
            ,toolbar: true
            ,title: '用户数据表'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title:'ID', width:60, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
                ,{field:'menuName', title:'菜谱名', width:80, edit: 'text'}
                ,{field:'finishedImg', title:'菜谱图', width:80, templet:'<div><img  src="{{ d.finishedImg }}"></div>'}
                ,{field:'des', title:'菜谱描述', width:180, edit: 'text'}
                ,{field:'createdTime', title:'创建日期', width:200, sort: true, totalRow: true,templet :"<div>{{layui.util.toDateString(d.createdTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{field:'modifiedTime', title:'更新日期', width:210, sort: true, totalRow: true,templet :"<div>{{layui.util.toDateString(d.modifiedTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true
            ,response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                // ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }

        });
        //监听表格复选框选择
        table.on('checkbox(test)', function(data){
            console.log(data);

        });
        //监听工具条
        table.on('tool(test)', function(data){
            var data = data.data;
            if(data.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(data.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    data.del();
                    layer.close(index);
                });
            } else if(data.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('#toolbarDemo .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });


    /*用户-删除*/
    function member_del(ths){
        let id={id: $(ths).parent().parent().parent().find("td").eq(1).find("div").html()};
         var flag = layer.confirm('确认要删除id:'+id.id+'吗？',function () {
             $.ajax({
                 type:"get",
                 url: "cbook/doDeleteByIds",
                 data:id,
                 success:function(data) {
                     if (data.message=="ok"){
                         layer.msg('已删除!', {icon: 1, time: 1000});
                         setTimeout(function() {
                             window.location.href = 'cbook/doFindObjects'
                         },0);
                     }

                     else
                         layer.msg('删除失败!', {icon: 1, time: 1000});
                 }
             })

         })
        // console.log($(ths).parent().parent().parent().find("td").eq(1).find("div").html())
        // console.log(ths)
        // console.log(flag)
        // if (flag) {
        //
        // }
    }

    function delAll (argument) {
        var ids = [];

        // 获取选中的id
        $('tbody input').each(function(index, el) {
            if($(this).prop('checked')){
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？'+ids.toString(),function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>


</html>